<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Commentmanagement">评论管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <div class="top">
        <div style="display: flex;padding: 0 60px;;">
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            称呼:
            <el-input
              v-model="input"
              placeholder="请输入称呼"
              style="width: 200px;height: 25px;padding-left: 4px;"
            />
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            Email:
            <el-input
              v-model="input1"
              placeholder="请输入联系方式"
              style="width: 200px;height: 25px;padding-left: 4px;"
            />
          </p>
          <p
            style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
          >
            状态:
            <el-select v-model="value" class="m-2">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </p>
        </div>
        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div class="le">
        <el-table ref="multipleTableRef" :data="list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="状态" width="130" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="称呼" width="140" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.lian }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="原始内容" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-popover
                  placement="top-start"
                  title="评论详细—原始内容"
                  :width="200"
                  trigger="hover"
                  :content="scope.row.title"
                >
                  <template #reference>
                    <el-button>查看内容</el-button>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="HTML内容" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-popover
                  placement="top-start"
                  title="评论详细—HTML内容"
                  :width="200"
                  trigger="hover"
                  :content="scope.row.title"
                >
                  <template #reference>
                    <el-button>查看内容</el-button>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="管理文章" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">
                  <a href>文章</a>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.data }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="父级评论" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.fu }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleTong(scope.$index, scope.row)"
              >{{ scope.row.ting }}</el-button>
              <el-button size="small" @click="handleJu(scope.$index, scope.row)">{{ scope.row.ju }}</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">回复</el-button>
              <el-button size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :page-size="10" :total="length"></el-pagination>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="回复评论" width="30%">
      <el-input v-model="textarea" :rows="2" type="textarea" placeholder="Please input" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="ok()">回复</el-button>
        </span>
      </template>
    </el-dialog>
    <el-pagination
            layout="prev, pager, next"
            :page-size="3"
            :total="length"
            @current-change="changeCode"
          ></el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref,reactive } from 'vue'
import { listping, pingtong, pingju, pingtian, pingdel,pingsou } from '../../api'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const page = reactive({
      pageCode: 1,
      pageSize: 3
    })
    const dialogVisible = ref(false)
    const list = ref()
    const value = ref('')
    const token1 = localStorage.getItem('token1')
    const token = localStorage.getItem('token')
    const input = ref('')
    const input1 = ref('')
    const textarea = ref('')
    const data1 = ref('')
    var d = new Date();  //获取时间
    var hour = d.getHours(); //获取小时
    var minute = d.getMinutes();//获取分 bn
    var second = d.getSeconds();//获取秒
    console.log(d.getFullYear()); //年
    console.log(d.getMonth() + 1);  //月
    console.log(d.getDate())   //日
    console.log(hour, minute, second);  //小时分钟秒
    data1.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + ' ' + hour + ':' + minute + ':' + second

    const options = [
      {
        value: '已通过',
        label: '已通过',
      },
      {
        value: '未通过',
        label: '未通过',
      }
    ]

    onMounted(() => {
      listping().then(res => {
        console.log(res);
        list.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
      })
    })
    // 点击通过按钮
    const handleTong = (id: any, v: any) => {
      if (token1 === '管理员') {
        console.log(id, v);
        pingtong(v).then(res => {
          console.log(res);
          ElMessage({
            message: '评论已通过',
            type: 'success',
          })
          listping().then(res => {
            console.log(res);
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }

    // 点击通过按钮
    const handleJu = (id: any, v: any) => {
      if (token1 === '管理员') {
        console.log(id, v);
        pingju(v).then(res => {
          console.log(res);
          ElMessage({
            message: '评论已拒绝',
            type: 'success',
          })
          listping().then(res => {
            console.log(res);
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
  
    const length=ref('')
    const changeCode = (pageCode: number) => {
      console.log(pageCode);

      page.pageCode = pageCode
      console.log(page);

      listping().then(res=>{
          console.log(res);
          list.value=res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value=res.data.total
        })

    }

    // 点击回复按钮
    const handleEdit = (id: any, v: any) => {
      if (token1 === '管理员') {
        console.log(id, v);
        dialogVisible.value = true

      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    // 点击确认添加
    const ok = () => {
      console.log(textarea);
      if (token1 == '管理员') {
        dialogVisible.value = false
        pingtian({ textarea, data1, token }).then(res => {
          console.log(res);
          listping().then(res => {
            console.log(res);
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }

    const handleDelete = (id: any, v: any) => {
      if (token1 === '管理员') {
        pingdel(v).then(res => {
          console.log(res);
          listping().then(res => {
            console.log(res);
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    const sou = () => {
      if (token1 === '管理员') {
          pingsou({value,input,input1,data1}).then(res=>{
            console.log(res);
            list.value = res.data.data
          })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
   const chong=()=>{
     value.value=''
     input.value=''
     input1.value=''
     listping().then(res => {
            console.log(res);
            list.value = res.data.data
          })
   }
      return {
        options,
        value,
        input,
        list,
        input1,
        handleTong,
        handleJu,
        handleEdit,
        dialogVisible,
        textarea,
        ok,
        handleDelete,
        sou,
        chong,
        changeCode,
        page,
        length
      }
    }
  })
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.top {
  width: 97%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
</style>
